<template>
  <div class="home" v-cloak>
    <h1>home</h1>
    <p>tab组件</p>
    <tab>
      <pane :lable="'菜单1'">11111</pane>
      <pane :lable="'菜单2'" :canClose="true">222222</pane>
      <pane :lable="'菜单3'" :canClose="true">3333333</pane>
      <pane :lable="'菜单4'" :canClose="true">
        <h1>123</h1>
        <h2>333</h2>
        <input type="text" placeholder="asdas">
      </pane>
    </tab>
    <p>table组件</p>
    <m-table style="m-table" :data="data" :columns="columns"></m-table>
    <p>留言列表组件</p>
  </div>
</template>

<script>
import tab from '../components/tab/tab.vue'
import pane from '../components/tab/pane'
import mTable from '../components/table/table'
export default {
  name: 'home',
  components: {
    tab,
    pane,
    mTable
  },
  data() {
    return {
      title: 'home',
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age',
          sortable: true
        },
        {
          title: '地址',
          key: 'address',
          sortable: false
        }
      ],
      data: [
        {
          name: '小明',
          age: 18,
          birthday: '1999-02-21',
          address: '北京市朝阳区芍药居'
        },
        {
          name: '小刚',
          age: 19,
          birthday: '1999-02-21',
          address: '北京市朝阳区芍药居'
        },
        {
          name: '王先生',
          age: 16,
          birthday: '1999-02-21',
          address: '语录达到'
        }
      ],
    }
  },
}
</script>

<style lang="less">
[v-cloak] {
  display: none;
}
.mTable {
  margin: 50px 0;
}
</style>